<template>
    <div>
        <el-container>
            <el-main>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-search"></i> 筛选查询</div>
                        <div>
                            <el-button @click.native="selectResults">查询结果</el-button>
                        </div>
                    </el-header>
                    <el-main class="info-main">
                        <el-form ref="form" :model="form" label-width="100px">
                            <el-form-item class="select-div" label="用户账号：">
                                <el-input placeholder="用户ID/账号" class="input-width" v-model="form.userNumber"></el-input>
                            </el-form-item>
                            <el-form-item class="select-div" label="用户昵称：">
                                <el-input placeholder="用户昵称" class="input-width" v-model="form.userName"></el-input>
                            </el-form-item>
                            <el-form-item class="select-div margin-left" label="会员等级：">
                                <el-select class="input-width" v-model="form.userMsId" placeholder="全部">

                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-main>
                </el-container>
            </el-main>

            <el-footer>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-s-fold"></i> 数据列表</div>
                        <div>
                            <el-button @click="dialogVisible=true">批量修改</el-button>
                            <el-button @click="exportOrder">导出数据</el-button>
                     
                              <el-select
                      v-model="sort"
                      type="number"
                      placeholder="排序方式"
                      class="input-width2"
                    >
                      <el-option label="会员等级" value="0"></el-option>
                     
                    </el-select>
                        </div>
                    </el-header>
                    <el-main class="info-main padding-style">
                        <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="tableData"  border style="width: 100%">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="userId" label="用户ID" width="150"></el-table-column>
                            <el-table-column prop="userNumber" label="用户账号" width="160"></el-table-column>
                            <el-table-column prop="userName" label="用户昵称"> </el-table-column>
                            <el-table-column prop="userMsId" label="会员等级"> </el-table-column>
                            <el-table-column prop="userGrowth" label="成长值"> </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="handleSelect(scope.$index, scope.row)">成长值明细</el-button>
                                    <el-button  size="mini" @click="dialogVisible=true">修改数值</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer class="info-foot">
                        <div class="paging-style">
                          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
                        </div>
                    </el-footer>
                </el-container>
            </el-footer>
        </el-container>

        <el-dialog title="修改匠币或成长值" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <el-form ref="search" :rules="rules" :model="search" label-width="120px">
                <div class="search-style">
                    <el-form-item prop="num" label="调整匠币：">
                        <el-input class="input-width3" placeholder="请输入大于0的整数" v-model="search.num">
                            <el-radio v-model="radio1" slot="prepend" label="0">增加</el-radio>
                            <template slot="append">个</template>
                        </el-input>
                        <el-input style="margin-top:10px;" class="input-width3" placeholder="请输入大于0的整数" v-model="search.datetime">
                            <el-radio v-model="radio1" slot="prepend" label="1">减少</el-radio>
                            <template slot="append">个</template>
                        </el-input>
                    </el-form-item>
                   
                    <el-form-item label="备注信息：">
                        <el-input type="textarea" class="input-width3" :rows="4" v-model="search.personnel"> </el-input>
                    </el-form-item>
                </div>
                <span class="dialog-footer" style="text-align: right;display: inline-block;width:100%;">
          <el-button @click="dialogVisible=false">取 消</el-button>
          <el-button type="primary" @click="confirm(search)">确 定</el-button>
        </span>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import growupApi from "@/api/user/growp";
import userApi from "@/api/user/list";
    export default {
        data() {
            return {
                form:{
                  userNumber: null,
        userName: null,
        userSource: null,
        userMsId: null,
        userJob:null,
        userCreateTime: null
                },
                rules:{
                    num: [
                        {required: true, message: '请输入操作备注', trigger: 'blur'}
                    ],
                    
                },
                search:{
                    num:'',
                    datetime:'',
                    personnel:'',
                },
               
                radio1:'1',
                multipleSelection: [],
                moreOperation:"",
                dialogVisible: false,
                // 分页相关
                pageSize: 2,
                 pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
                 total: 5,
                 currentPage1: 1,
                sort: 0,
                      // 开启筛选模式
                       selectrue:false,
                tableData: [],
            }
        },
         // 监听有数据改变执行方法
  watch: {
    sort(val, newval) {
      console.log(val);
      console.log(newval);
      this.intData(this.currentPage1, this.pageSize, newval);
    },

  },
        methods:{
            selectResults(){
                 console.log(this.form);
    

 var userNumber=this.form.userNumber;
 var userName=this.form.userName;
 var userSource=this.form.userSource;
 var userMsId=this.form.userMsId;
 var userJob=this.form.userJob;
 var userCreateTime=this.form.userCreateTime;

   if(userNumber!=null||userName!=null||userSource!=null||userMsId!=null||userJob!=null||userCreateTime!=null){
        this.selectrue=true;
      }else{
        this.selectrue=false;
      };
      console.log("筛选模式:"+this.selectrue);
      this.intDataTwo(this.currentPage1,this.pageSize,userNumber,userName,userSource, userMsId, userJob, userCreateTime,this.sort)
            },
            // 
            exportOrder(){
                alert("执行导出数据")
            },
            searchReset(){
                this.search.num='';
                this.search.datetime='';
                this.search.personnel='';
            },
            handleSelect(index, row) {
                 this.$router.push({
        path: "/user/growUpInfo",
        query: { userId: row.userId}
      });
            },
            // 分页方法
            handleSizeChange(val) {
              this.pageSize = val;
      console.log("得到" + this.pageSize);
    

        if(this.selectrue==true){
 this.intDataTwo(this.currentPage1, this.pageSize,this.form.userNumber,this.form.userName,
 this.form.userSource,this.form.userMsId,this.form.userJob,this.form.userCreateTime,this.sort)
      }else{
         this.intData(this.currentPage1, this.pageSize, this.sort);
      }
            },
               handleCurrentChange(val) {
               this.currentPage1 = val;
     if(this.selectrue==true){
 this.intDataTwo(this.currentPage1, this.pageSize,this.form.userNumber,this.form.userName,
 this.form.userSource,this.form.userMsId,this.form.userJob,this.form.userCreateTime,this.sort)
      }else{
         this.intData(this.currentPage1, this.pageSize, this.sort);
      }
            },
            // 
            confirm(formName){
                 console.log(this.multipleSelection);
                  console.log(formName.personnel);
                 if(this.radio1==0){
                     console.log(formName.num);
                        //  需要个连接后台方法
                growupApi.addManyList(this.multipleSelection,formName.num,formName.personnel,this.radio1).then(response => {
        console.log(response);
       
      });
                 };
                 if(this.radio1==1){
                       console.log(formName.datetime);
                                 //  需要个连接后台方法
                growupApi.addManyList(this.multipleSelection,formName.datetime,formName.personnel,this.radio1).then(response => {
        console.log(response);
       
      });
                 };
                
// 获取list数组
             
                
            },
         
            handleSelectionChange(val) {
                  // 因为此方法是在选择改变时调用，所以必须初始化数组 如果不初始化数组 数组将会层层叠加
      this.multipleSelection = [];
       // 为multipleSelection赋值   multipleSelection为id数组
      val.forEach(v => {
        this.multipleSelection[this.multipleSelection.length] = v.userId;
      });
            },
            handleClose(done) {
                done();
            },
            // 获取分页数据
    intData(pageNum, pageSize, sort) {
      userApi.getListByOder(pageNum, pageSize, sort).then(response => {
        console.log(response);
        this.tableData = response.data.data.list;
        this.total = response.data.data.total;
      });
    },
// 筛选数据
   intDataTwo(pageNum, pageSize,userNumber,userName, userSource, userMsId, userJob, userCreateTime, sort) {
      userApi.getListByUser(pageNum, pageSize, userNumber, userName, userSource, userMsId, userJob, userCreateTime, sort).then(response => {
        console.log(response);
    
        this.tableData = response.data.data.list;
        this.total = response.data.data.total;
      });
    }
        },
        mounted(){
            this.intData(this.currentPage1, this.pageSize, this.sort);
        }
    }
</script>

<style scoped>
    .badges {
        height: 60px;
        padding: 10px;
    }
    .common-home,.content-header{
        border-bottom:1px solid #E4E4E4;
        position: relative;
    }
    .common-home>div{
        display: inline-block;
        width:100px;
        height:50px;
        vertical-align: top;
        text-align: center;
        line-height: 50px;
        color:#666666;
    }
    .common-home>.refresh{
        position: absolute;
        right:10px;
    }
    .common-home>div>span{
        border:4px solid #0399FE;
        display: inline-block;
        width: 0px;
        height: 15px;
        vertical-align: middle;
        margin-right: 5px;
        background-color: #0399FE;
    }
    .parent-body{
        border:1px solid #E4E4E4;
    }
    .content-header{
        height:50px;
        line-height: 50px;
        background-color:#F3F3F3;
        color:#666666;
        position: relative;
        text-align: left;
    }
    .info-main{
        background-color:#fff;
    }

    .content-header>div{
        display: inline-block;
    }
    .content-header>div:last-of-type{
        position: absolute;
        right:10px;
    }
    .input-width{
        width:200px;
    }
    .select-div{
        display: inline-block;
        width:300px;
    }
    .input-width2{
        width:120px;
    }
    .input-width3{
        width:400px;
    }
    .padding-style{
        padding:0 !important;
    }

    .info-foot{
        background-color:#FDFDFE;
        height:60px;
        line-height: 60px;
        position: relative;
    }
    .paging-style{
        position: absolute;
        right:10px;
        display: inline-block;
        top:15px;
    }
    .margin-left{
        margin-left:10px;
    }
    .search-style{
        width:50%;
        display: inline-block;
        vertical-align: top;
    }
</style>

